<template>
  <div style="margin: -10px; -10px 5px; height: 100vh">
    <pdf
      class="pdf"
      v-for="i in pageCount"
      :src="src"
      :page="i"
      @num-pages="pageCount"
      @page-loaded="i"
    ></pdf>

    <div>
      <div ref="file" class="docx" style="height: 100vh; width: 100wh"></div>
    </div>
  </div>
</template>
<script></script>
<script setup>
import { useRoute } from "vue-router";
import { nextTick } from "vue";
import axios from "axios";
import { file as fileApi } from "@/api/file/index.js";
// import { renderAsync } from "docx-preview";
import * as docx from "docx-preview";
import * as JSZip from "jszip";

// import JSZip from "jszip";
const { proxy } = getCurrentInstance();

const request = axios.create({
  baseURL: "",
  timeout: 100000000000,
});
const fileRequest = (url) =>
  request({
    method: "get",
    responseType: "blob",
    url,
  });
// let docx;
// const docx = ref();

onMounted(async () => {
  window.JSZip = JSZip;
  // docx.value = await import("docx-preview");
  initData();
});

const route = useRoute();
const { fileUrl } = route.query;

const state = reactive({
  fileid: "",
  pdfUrl: "", // pdfUrl
  fileUrl: "",
  richInfo: "", // 富文本内容
  videoUrl: "", // 视频链接地址
  imageUrl: "", // 图片地址
  pageTotalNum: 1, // 总页数
  isPdf: false, // 判断是否是pdf
  isDocx: false, // 判断是否是docx
  isVideo: false, // 判断是否是视频
  isImage: false, // 判断是否是图片
  loading: null, // loading加载
});
const file = ref();
const initData = () => {
  state.isPdf = false;
  state.isDocx = false;
  state.isVideo = false;
  state.isImage = false;
  const fileType = fileUrl.split(".").pop();
  switch (fileType) {
    case "pdf":
      state.isPdf = true;
      pdf
        .createLoadingTask(fileUrl)
        .promise.then((pdf) => {
          state.pageCount = pdf.numPages;
        })
        .catch((err) => {
          // this.$message("文件加载失败");
        });
      break;
    case "docx":
    case "doc":
      state.isDocx = true;
      nextTick().then(() => {
        // fileRequest("http://ashuai.work:10000/getDoc");
        fileApi
          .getFile(fileUrl)
          .then((res) => {
            docx.renderAsync(res, file.value);
          })
          .catch((err) => {
            console.log(proxy.$refs.file, "文件加载失败");
            // $message("文件加载失败");
          });
      });

      break;
    case "avi":
    case "mp4":
      state.isVideo = true;
      document.body.className = "full";
      break;
    case "jpg":
    case "jpeg":
    case "png":
    case "gif":
    case "ico":
      state.isImage = true;
      break;
  }
};
</script>

<style>
.full {
  min-width: auto !important;
  height: 100%;
  overflow: hidden;
}
</style>

<style scoped lang="scss">
.pagination {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #041031;
  padding: 5px;
  display: inline-block;
}

.title_text {
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #e1e2e8;
  margin: 16px auto 50px auto;
  background: RGBA(7, 26, 78, 0.9);
}

.richText {
  img {
  }
}

.video {
  height: calc(100vh - 4px);
}
.close {
  position: absolute;
  right: 20px;
  top: 0;
  font-size: 30px;
  cursor: pointer;
}
</style>
